<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <style>
            * {
                padding:0;
                margin:0
            }
        </style>
        <script>
            /*
                脚本
                    *页面输出
                        document.write();
                        document.writeln();

                    *获取页面元素
                        document.getElementById             id
                        document.getElementsByClassName     class
                        document.getElementsByTagName       tag

                        document.head
                        document.title
                        document.body

                    *控制页面元素
                        新建节点元素 document.createElement
                        增加节点元素 appendChild
                        删除节点元素 removeChild

                        填充内容
                            innerText       部分浏览器支持  = 赋值
                            textContent     部分浏览器支持  = 赋值
                            createTextNode  文本内容[对象] 使用appendChild添加
                            innerHTML       将HTML代码填充

                        属性控制
                            原生属性     访问    obj.id
                                        设置    obj.id =
                            自定义属性   访问    obj.getAttribute('属性名称')
                                        设置    obj.getAttribute('属性名称', '属性内容')

                        样式控制
                            访问      行内样式      obj.style.xxx[具体的样式名称]
                                      样式表样式    obj.currentStyle.xxx [IE支持]
                                                   getComputedStyle(obj, false)[xxx] [谷歌支持]
                            设置      obj.style.xxx = 'xxx';


                        新的内置对象  方法

                        window对象    内置对象
                            alert();
                            prompt();
                            confirm();

                            setTimeout() 延迟执行的方法 执行完结束,只执行1次
                                参数1: 脚本内容
                                参数2: 时间单位 (ms) 1000ms = 1s
                            setInterval()

                            open打开
                            close关闭

                             鼠标悬停
                             onmouseover
                             鼠标离开
                             onmouout


                        String对象
                            属性
                                length  长度
                            方法
                                下标从0开始
                                substr  截取长度 (启始位置, 长度)  返回截取的内容
                                indexOf 查找位置 (内容)           返回查到的位置 没有返回-1
                                concat  追加
                                charAt  获取某个位置的字符内容
                                startWith  判断是否以xx开头
                                endsWidth  判断是否以xx结束
                                replace 替换

                        Date对象  表示日期 取的是客户端的时间
                            方法
                                getFullYear 获取年份

                        Math数学对象
                            方法
                                max 返回最大值
                                min 返回最小值
                                random 返回随机值    0 - 1 之间的一个浮点数
                                floor 舍去小数位
            */

            var _left = _top = 0;

            var myTime = function() {
                var d = new Date();//表明生成了一个日期对象
                var year = d.getFullYear();
                var month = d.getMonth();//从0开始
                var date = d.getDate();
                var week = d.getDay();
                var hour = d.getHours();
                var minute = d.getMinutes();
                var second = d.getSeconds();
                var ms = d.getMilliseconds();
                var pv = document.getElementById('p1');
                pv.textContent = '今天是 : 星期' + week + ' ' + year + '年' + (month + 1) + '月' + date + '日' + hour + ':' + minute + ':' + second;

                pv.style.left = _left++ + 'px';

                pv.style.top = _top++ + 'px';

                //window.setTimeout(myTime, 1000);
            };


            window.onload = function() {
                //setInterval 按照时间 间隔来循环执行
                //参数1: 脚本内容
                //参数2: 时间单位 (ms) 1000ms = 1s
                myTime();
                window.setInterval(myTime, 100);
            };
        </script>
    </head>

    <body>
        <p id = 'p1' style = 'position:absolute;left:0;top:0;font-size:12px;border:1px solid #0b58a2;width:200px;height:20px'></p>
        <button id = 'btn'>测试</button>
    </body>
</html>